<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米-登录</title>
    <script src="vue.2.6.10.js"></script>
    <link rel="stylesheet" href="iconfont/iconfont.css">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        .top{
            height: 98px;
            margin: 0 155px;
        }
        .main{
            height: 588px;
            background-image:url('https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e8201bfbb8c9d474a48da76f7d81a5c7.jpg');
            background-position: center center;


        }
        fieldset{
            border: 0;
            border-top: 1px solid #e0e0e0;
            padding-top: 10px;
        }
        .rest{
            color: #bbb;
            font-size: 14px;
            margin: 0 auto;
            text-align: center;
        }
        .tab-login{
            position: absolute;
            right: 150px;
            top: 150px;
            width: 410px;
            height: 497px;
            background-color: white;
            text-align: center;
        }
        .navTab {
            padding: 27px 0 24px;
            font-size: 24px;
            color: #666666;
        }
        .navTab a,
        .navTab span{
            padding-left: 25px;
            color: black;
        }

        .navTab a:hover {
            color: #f56600;
        }
        .inputLogin input{
            margin-top: 20px;
            width: 346px;
            height: 48px;
        }
        .inputLogin input::placeholder{
            padding-left: 10px;
        }
        .loginBtn{
            margin-top: 20px;
            border: none;
            width: 348px;
            height: 50px;
            background-color: #ff6700;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }
        .reBox{
            margin-top: 15px;
        }
        .reBox .rigister
        {
            float: left;
            padding-left: 35px;
            color: #ff6700;
        }
        .reBox .reRight{
            float: right;
            padding-right: 35px;

        }
        .reBox .reRight a,span{
            padding: 0;
            color: #bbb;
        }
        .restPad{
            padding-top: 100px;
        }
        .iconColor a i{
            padding-left: 20px;
            font-size: 30px;
        }
        .login-img{
            margin-top: 100px;
        }
        .customTxt{
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div id="login">
    <div class="top">
        <img src="img/mistore_logo.png" alt="">
    </div>
    <div class="main">
        <mi-login></mi-login>
    </div>
</div>
<template id="loginComponet">
  <div class="tab-login">
      <div class="navTab"><a href="" style="color: #ff6700" @click="left">账号登录</a><span>|</span><a href="" @click="right">扫码登录</a></div>
      <div v-model="account" style="display: block;">
     <div class="inputLogin">
          <input class="item_account" type="text" placeholder="邮箱/手机号码/小米ID">
          <div><input class="item_account" type="password" placeholder="密码"></div>
          <button class="loginBtn">登录</button>
          <div class="reBox"><a class="rigister" href="">手机短信登录/注册</a>      <div class="reRight"><a  href="">立即注册</a><span>|</span><a href="">忘记密码</a></div></div>
      </div>
      <div class="restPad"><fieldset><legend class="rest">其他方式登录</legend></fieldset></div>
      <div class="iconColor">
          <a href="#"><i class="iconfont icon-QQ"></i></a>
          <a href="#"><i class="iconfont icon-weibo"></i></a>
          <a href="#"><i class="iconfont icon-zhifubao"></i></a>
          <a href="#"><i class="iconfont icon-weixindenglu"></i></a>
      </div>
      </div>
      </div>
  </div>
      <div id="scan" style="display: none;">
          <div class="login-img">
              <img src="img/下载.png" alt="">
          </div>
          <div class="customTxt">
              <p>
                  使用
                  <span>小米商城APP</span>
                  扫一扫
              </p>
              <p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
          </div>
      </div>
  </div>
</template>
<script>
    Vue.component('mi-login',{
        template:"#loginComponet",
        methods:{
            left(e){
                    // this.account
            }
        }
    });
    let login=new Vue({
        el:"#login",
        data:{

        }
    });
</script>
</body>
</html>